<template>
<view>
<view class="container">
    <view class="coupon-list">
        <view v-for="(item, index) in coupons" :key="index" class="coupon-box" v-if="item.coupon.able == 1">
          <view>
                <view class="coupon-head" :style="'border-image-source:url(' + resourceUrl + '/static/images/coupon_a.png)'">
                    <view class="coupon-money"> <text class="money">￥{{item.coupon.money}}</text></view>
                    <view class="ellipsis-2">满 {{item.coupon.condition}} 元使用</view>
                    <view class="ellipsis-1">【{{item.coupon.name}}】</view>
                </view>
                <view class="coupon-body">
                    <view class="range">有效期:{{item.coupon.addTimeFormat}}</view>
                    <view class="range" style="margin-top:5px;">{{item.coupon.use_type_title}}</view>
                    <view class="use-btn" @tap="useCoupon" :data-idx="index">{{lid == item.id?'取消使用':'立即使用'}}</view>
                </view>
            </view>
        </view>
    </view>
</view>

<view class="no-data" v-if="!coupons || coupons.length == 0">
    <image src="/static/images/cart-null.png" class="cart-image"></image>
    <view class="no-data-title">没有找到相关的数据</view>
</view>
</view>
</template>

<script>
var app = getApp();
var request = app.globalData.request;
var util = require("../../../utils/util.js");

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      coupons: null,
      lid: -1 //使用的优惠券id

    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    var pages = getCurrentPages(); //获取页面栈

    if (pages.length > 1) {
      var prePage = pages[pages.length - 2]; //上一个页面实例对象

      for (var i = 0; i < prePage.data.coupons.length; i++) {
        prePage.data.coupons[i].coupon.addTimeFormat = util.formatTime(prePage.data.coupons[i].coupon.use_end_time);
      }

      this.setData({
        coupons: prePage.data.coupons
      });
      console.log(prePage.data.coupons);
    }

    console.log(options.lid);

    if (typeof options.lid != 'undefined') {
      this.setData({
        lid: options.lid
      });
    }
  },
  methods: {
    /** 使用优惠券 */
    useCoupon: function (e) {
      //设置cart2的变量，传递参数
      var coupon = this.coupons[e.currentTarget.dataset.idx];

      if (this.lid != coupon.id) {
        //立即使用
        uni.setStorageSync('cart:cart2:cid', coupon);
      } else {
        //取消使用
        uni.removeStorageSync('cart:cart2:cid');
      }

      uni.navigateBack();
    }
  }
};
</script>
<style>
/* checkcoupon.wxss */
.type-navbar{
    white-space: nowrap;
    display: flex;
    width: 100%;
    height:80rpx;
    background-color: #fff;
}
.type-box{
    width: 50%;
    box-sizing: border-box;
    font-size: 28rpx;
    line-height: 76rpx;
    padding: 0 20rpx;
    text-align: center;
    display: inline-block;
    overflow: hidden;
}
.type-navbar-item{
    border-bottom: 4rpx solid #fff;
}
.type-item-on{
    border-bottom: 4rpx solid #ff6a00;
    font-weight: bold;
}
.coupon-box{
    box-sizing: border-box;
    width: 50%;
    float: left;
    padding: 50rpx 30rpx 0;
    font-size: 25rpx;
}
.coupon-head{
    background-color: #fd9064;
    color: white;
    padding: 20rpx 30rpx 5rpx;
    border-bottom:2px solid transparent;
    border-image:none 100% 0 5 repeat;
}
.coupon-money{
    font-weight: bold;
    margin-bottom: 20rpx;
}
.money{
    font-size: 40rpx;
}
.coupon-body{
    background-color: white;
    padding: 30rpx 30rpx 40rpx;
    color: #999999;
}
.use-btn{
    color: #fd9064;
    border: 2rpx #fd9064 solid;
    padding: 6rpx 35rpx;
    border-radius: 35rpx;
    width: fit-content;
    margin: 20rpx auto 0;
}
.range{
    font-size: 24rpx;
    line-height: 24rpx;
    height: 48rpx;
}
.head-disable{
    background-color: #999999;
}
.btn-disable{
    color: #999999;
    border-color: #999999;
}

</style>